<template>
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <el-breadcrumb separator="">
                <el-breadcrumb-item v-if="!title"
                                    :to="{ name: 'parkManage' }">
                    <div class="div1">停车场管理</div>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <div class="div2">停车场详情</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="address">
            <p class="header">停车场信息</p>
            <ul>
                <li>
                    <p v-if="!is_null(content)">
                        停车场名称：{{ content.name }}
                    </p>
                    <p v-if="!is_null(content)">
                        详细地址：{{ content.detailAddress }}
                    </p>
                    <p v-if="!is_null(content)">
                        备注：{{ content.remark }}
                    </p>
                </li>
            </ul>
        </div>
        <div class="address">
            <p class="header">创建时间</p>
            <ul>
                <li>
                    <p v-if="!is_null(content)">
                        创建时间：{{ content.createdTime }}
                    </p>
                    <p v-if="!is_null(content)">
                        最后修改时间：{{ content.updatedTime}}
                    </p>
                </li>
            </ul>
        </div>
        <div class="orderBox">
            <p class="header">关卡信息</p>
            <el-button type="primary"
                       style="margin-top:20px;margin-right:45px"
                       @click="addCustoms(1)">新增关卡</el-button>
            <el-table :data="customsList"
                      @selection-change="handleSelectionChange"
                      style="width: 100%">
                <el-table-column type="selection"
                                 width="50">
                </el-table-column>
                <el-table-column prop="name"
                                 label="关卡名称">
                    <template slot-scope="props">
                        {{ props.row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="typeName"
                                 label="类型名称"
                                 width="180">
                    <template slot-scope="props">
                        {{ props.row.typeName }}
                    </template>
                </el-table-column>
                <el-table-column prop="functionUrl"
                                 label="功能链接">
                    <template slot-scope="props">
                        {{ props.row.functionUrl }}
                    </template>
                </el-table-column>
                <el-table-column prop="functionQrcodeImageUrl"
                                 label="功能链接二维码">
                    <template slot-scope="props">
                        <img v-if="props.row.functionQrcodeImageUrl"
                             class="qrcodeImg"
                             :src="props.row.functionQrcodeImageUrl">
                        <p v-if="props.row.functionQrcodeImageUrl"
                           class="downloadClass"
                           @click="download(props.row.functionQrcodeImageUrl)">立即下载</p>
                    </template>
                </el-table-column>

                <el-table-column prop="wxQrcodeImageUrl"
                                 label="公众号二维码">
                    <template slot-scope="props">
                        <img v-if="props.row.wxQrcodeImageUrl"
                             class="qrcodeImg"
                             :src="props.row.wxQrcodeImageUrl">
                        <p @click="download(props.row.wxQrcodeImageUrl)"
                           v-if="props.row.wxQrcodeImageUrl"
                           class="downloadClass">立即下载</p>
                    </template>
                </el-table-column>
                <el-table-column prop="createdTime"
                                 label="创建时间">
                    <template slot-scope="props">
                        {{ props.row.createdTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="updatedTime"
                                 label="最后修改时间">
                    <template slot-scope="props">
                        {{ props.row.updatedTime }}
                    </template>
                </el-table-column>
                <el-table-column label="操作"
                                 fixed="right"
                                 width="180">
                    <template slot-scope="scope">
                        <el-button @click="compile(scope.row,2)"
                                   type="text"
                                   size="small">编辑</el-button>
                        <el-button @click="handleClickDelete(scope.row)"
                                   type="text"
                                   size="small">删除</el-button>
                        <!-- <el-button @click="startUsing(scope.row)" type="text" size="small">查看详情</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog :title="addtitle"
                   :append-to-body="true"
                   :visible.sync="dialogVisible"
                   width="30%"
                   :before-close="handleClose">
            <el-form :model="ruleForm"
                     status-icon
                     :rules="rules"
                     ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
                <!-- <el-form-item label="停车场ID"
                              prop="parkingLotInfoId">
                    <el-input type="text"
                              placeholder="请输入本停车场ID"
                              v-model="ruleForm.parkingLotInfoId"
                              autocomplete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="名称"
                              prop="name">
                    <el-input type="text"
                              placeholder="请输入名称"
                              v-model="ruleForm.name"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型"
                              prop="type">
                    <el-select v-model="ruleForm.type"
                               placeholder="请选择活动区域">
                        <el-option label="出口"
                                   value="0"></el-option>
                        <el-option label="入口"
                                   value="1"></el-option>
                        <el-option label="预支付"
                                   value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="功能链接"
                              prop="functionUrl">
                    <el-input v-model="ruleForm.functionUrl"
                              placeholder="请输入功能链接"></el-input>
                </el-form-item>
                <div class="btnBox">
                    <el-button @click="dialogVisible=false">取消</el-button>
                    <el-button type="primary"
                               @click="submitForm('ruleForm')">确定</el-button>
                </div>

            </el-form>
        </el-dialog>
        <!-- 关卡详情弹框 -->
        <!-- <el-dialog
            :append-to-body="true"
                title="关卡详情"
                :visible.sync="dialogVisibleRecord"
                width="30%"
                :before-close="handleCloseRecord">
            <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称:" prop="parkingLotInfoId">
                <span>{{customsDetailsList.name}}</span>
            </el-form-item>
             <el-form-item label="类型:"  prop="functionUrl" >
                <span>{{customsDetailsList.typeName}}</span>
            </el-form-item>


            <el-form-item label="功能链接"  prop="functionUrl" >
                <span>{{customsDetailsList.functionUrl}}</span>
            </el-form-item>
             <el-form-item   prop="functionUrl" >
                <img class="qrcodeImg" :src="customsDetailsList.functionQrcodeImageUrl"> </img>
            </el-form-item>

             <el-form-item label="公众号二维码"  prop="functionUrl" >
                  <img class="qrcodeImg" :src="customsDetailsList.wxQrcodeImageUrl"> </img>
            </el-form-item>

             <el-form-item label="创建时间"  prop="functionUrl" >
                <span>{{customsDetailsList.createdTime}}</span>
            </el-form-item>
             <el-form-item  label="最后修改时间"  prop="functionUrl" >
                <span>{{customsDetailsList.updatedTime}}</span>
            </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseRecord">取 消</el-button>
                <el-button type="primary" @click="handleCloseRecord">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>

</template>

<script>
import ClipboardJS from 'clipboard'
import QRCode from 'qrcodejs2'
import documentationVue from '../help/documentation.vue'
import { saveAs } from 'file-saver'
export default {
    data() {
        return {
            state: '',
            addtitle: '',
            id: '',
            customsId: '', //关卡ID
            tableData: [],
            orderId: '',
            content: {},
            activeName: '',
            gdActive: 'before',
            gdJuage: false,
            logistlist: [],
            title: false, //判断导航栏
            limits: '',
            parArray: [],
            intention: [],
            qrtype: '',
            official: [],
            qrHidden: false,
            dialogVisibleTail: false, //支付尾款
            money: '', //尾款金额
            dialogVisible: false,
            customsList: [], //关卡数据列表
            customsDetailsId: '', //关卡详情ID
            ruleForm: {
                parkingLotInfoId: '',
                name: '',
                type: null,
                functionUrl: '',
            },
            customsDetailsList: [], //关卡详情数据列表
            multipleSelection: [], //表格多选
            dialogVisibleRecord: false, //关卡详情弹框状态
            rules: {
                // parkingLotInfoId: [
                //     {
                //         required: true,
                //         message: '请输入关卡名称',
                //         trigger: 'blur',
                //     },
                // ],
                name: [
                    {
                        required: true,
                        message: '请输入关卡名称',
                        trigger: 'change',
                    },
                ],
                type: [
                    {
                        required: true,
                        message: '请输入类型',
                        trigger: 'change',
                    },
                ],
                functionUrl: [
                    {
                        required: true,
                        message: '请输入功能链接',
                        trigger: 'change',
                    },
                ],
            },
        }
    },
    mounted() {},
    created() {
        // 权限设定判断
        this.limits = JSON.parse(sessionStorage.getItem('limit'))
        const params = this.limits.buttonTreeDto.filter(
            (item) => item.menuCode === 'orderListCode'
        )
        params[0].buttonList.forEach((item) => {
            this.parArray.push(item.code)
        })
        this.title = this.$route.query.title
        // 权限设定判断
        this.id = this.$route.query.id
        this.orderId = this.$route.query.orderId
        console.log(this.orderId)
        this.intentionAxios()
        this.detailAxios()
        this.levelsList()
    },
    watch: {
        dialogVisibleSucceed(val) {
            console.log(val)
            if (val == true) {
                this.succeedTime()
            } else {
                clearInterval(this.set)
            }
        },
    },
    methods: {
        download(e) {
            const link =  document.createElement('a')
            link.style.display = "none";
            link.href = e;
            link.setAttribute("download",name + ".jpg");
            document.body.appendChild(link);
            link.click()
            // link.download = name
            // // 设置图片地址
            // link.href = e
            // link.click();
            // link.remove();
        },
        // 编辑
        compile(row, e) {
            this.addtitle = '编辑'
            console.log(row)
            this.state = e
            this.customsId = row.id
            if (this.state == 2) {
                this.dialogVisible = true
                // this.ruleForm.parkingLotInfoId = row.parkingLotInfoId
                this.ruleForm.name = row.name
                this.ruleForm.type = row.type
                this.ruleForm.functionUrl = row.functionUrl
            }
        },

        // 表格多选
        handleSelectionChange(e) {
            console.log(e)
            this.multipleSelection = e
        },

        //  查看详情
        startUsing(e) {
            console.log(e)
            this.customsDetailsId = e.id
            this.customsDetails()
            this.dialogVisibleRecord = true
            console.log(this.tableDataRecord)
        },
        handleCloseRecord() {
            this.dialogVisibleRecord = false
        },
        // 新增关卡
        addCustoms(e) {
            this.addtitle = '新增关卡信息'
            // this.ruleForm.parkingLotInfoId = ''
            this.ruleForm.name = ''
            this.ruleForm.type = null
            this.ruleForm.status = ''
            this.ruleForm.functionUrl = ''
            this.state = e
            this.dialogVisible = true
        },
        handleClose(done) {
            done()
        },
        //   停车场关卡详情查询
        customsDetails() {
            this.axios
                .get(`/parking/parkingGate/get?id=${this.customsDetailsId}`)
                .then((res) => {
                    console.log(res)
                    if (res.code == 0) {
                        this.customsDetailsList = res.data

                        console.log(this.customsDetailsList)
                    } else {
                        this.$message.error(
                            '获取关卡详情列表数据出错，请联系系统管理员！'
                        )
                    }
                })
        },
        //   提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.state == 1) {
                        this.axios
                            .post('/parking/parkingGate/add', {
                                parkingLotInfoId: this.id,
                                name: this.ruleForm.name,
                                type: Number(this.ruleForm.type),
                                functionUrl: this.ruleForm.functionUrl,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    console.log(res)
                                    this.levelsList()
                                    this.dialogVisible = false
                                    this.$message.success('新增成功')
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                    } else {
                        this.axios
                            .post('/parking/parkingGate/update', {
                                parkingLotInfoId: this.id,
                                name: this.ruleForm.name,
                                type: this.ruleForm.type,
                                functionUrl: this.ruleForm.functionUrl,
                                id: this.customsId,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    console.log(res)
                                    this.levelsList()
                                    this.dialogVisible = false
                                    this.$message.success('编辑成功')
                                } else {
                                    this.$message.error('编辑失败')
                                }
                            })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        //   删除
        handleClickDelete(e) {
            this.$confirm('确定删除该关卡信息？, 是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let idList = []
                    if (this.multipleSelection.length) {
                        for (
                            let i = 0;
                            i < this.multipleSelection.length;
                            i++
                        ) {
                            idList.push(this.multipleSelection[i].id)
                        }

                        this.axios
                            .post('/parking/parkingGate/delete', {
                                ids: idList,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    this.multipleSelection = []
                                    this.levelsList()
                                    this.$message.success('删除成功！')
                                } else {
                                    this.$message.error(
                                        '删除失败！请联系系统管理员'
                                    )
                                }
                            })
                    } else {
                        this.axios
                            .post('/parking/parkingGate/delete', {
                                ids: [e.id],
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    this.levelsList()
                                    this.$message.success('删除成功！')
                                } else {
                                    this.$message.error(
                                        '删除失败！请联系系统管理员'
                                    )
                                }
                            })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })

            console.log(e)
        },
        //   关卡列表数据
        levelsList() {
            this.axios
                .post('/parking/parkingGate/pageList', {
                    parkingLotInfoId: this.id,
                })
                .then((res) => {
                    if (res.code == 0) {
                        console.log(res, '关卡数据')
                        this.customsList = res.data
                    } else {
                        this.$message.error('关卡数据列表获取失败！')
                    }
                })
        },
        backOderList() {
            clearInterval(this.set)
            this.$router.push({ name: 'orderList' })
        },
        paymentkehu() {
            clearInterval(this.set)
            this.$router.push({ name: 'myCustomers' })
        },

        succeedTime() {
            var time = 5
            this.set = setInterval(() => {
                time--
                document.getElementById(
                    'succeedTime'
                ).innerHTML = `支付成功，<span style='color:#4C81EB'>${time}S</span>后自动跳转订单页面...`
                if (time === 0) {
                    clearInterval(this.set)
                    this.$router.push({ name: 'orderList' })
                }
            }, 1000)
        },

        transactionrecord() {
            this.$router.push({
                name: 'transactionrecord',
                query: {
                    orderId: this.content.orderUser.orderIdStr,
                    orderStatus: this.$route.query.orderStatus,
                },
            })
        },

        qrtypeEvent(param) {
            this.dialogVisible = true
            if (param == 1) {
                this.qrtype = 1
                this.orderMoney = 0
                this.officialVal = ''
            } else {
                this.qrtype = 2
                this.orderMoney = 0
                this.officialVal = ''
            }
            this.officialEvent() //公众号列表
        },

        detailAxios() {
            this.axios
                .get(`/parking/parkingLot/get?id=${this.id}`)
                .then((res) => {
                    if (res.code == 0) {
                        console.log(res)
                        this.content = res.data
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        intentionAxios() {
            this.axios
                .post(
                    '/order/comm/customeruser/selectCustomerintention',
                    {
                        salesAuthorityId: JSON.parse(
                            sessionStorage.getItem('salesAuthorityId')
                        ),
                    },
                    {
                        headers: {
                            isLoading: false,
                        },
                    }
                )
                .then((res) => {
                    // console.log(res)
                    if (res.code == 0) {
                        this.intention = res.data
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        // url转二维码

        logistDetail() {
            this.axios
                .get(
                    '/order/logistics/node/tracking/' +
                        this.content.orderUser.logisticsOrder.id,
                    {
                        headers: {
                            isLoading: false,
                        },
                    }
                )
                .then((res) => {
                    // console.log(res);
                    if (res.code == 0) {
                        // console.log('物流节点');
                        this.logistlist = res.data
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },

        handleClick(tab, event) {
            console.log(tab, event)
        },

        is_null(content) {
            if (content) {
                return false
            } else {
                return true
            }
        },
    },
}
</script>

<style scoped lang="scss">
/deep/.el-dialog {
    border-radius: 10px;
}
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title_box {
    display: flex;
    align-items: center;
    .title_left {
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #4c81eb;
        opacity: 1;
        margin-right: 5px;
    }
}
.hint {
    color: red;
    font-size: 13px;
}
.btnBox {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.content {
    text-align: center;
    .imgBox {
        margin: auto;
        width: 174px;
        height: 178px;
        overflow: hidden;
        img {
            width: 100%;
            height: auto;
        }
    }
    .content_title {
        .content_title_txt {
            margin-bottom: 15px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            .money {
                color: red;
            }
        }
    }
    .payBox {
        margin-top: 60px;
        width: 450px;
        height: 100px;
        .payBox_way {
            float: left;
            height: 50px;
            width: 450px;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 50px;
            background-color: #eee;
        }
        .payBox_mode {
            display: flex;
            justify-content: space-between;
            height: 50px;
            width: 450px;
            padding: 0 10px 0 10px;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 50px;
        }
    }
}
.btn {
    cursor: pointer;
    color: #4c81eb;
}
.imgBox {
    margin: auto;
    width: 174px;
    height: 178px;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
    }
}
.money_box {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 16px;
    .money_num {
        color: red;
    }
}
.payBox {
    margin: auto;
    text-align: center;
}
.div1 {
    margin-left: -16px;
    background: url(../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
}

.div2 {
    margin-left: -16px;
    background: url(../../assets/breadcrumb1.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.div3 {
    margin-left: -8px;
    background: url(../../assets/breadcrumb3.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
}
.header {
    font-size: 15px;
    color: #2d7edf;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.state {
    background: #fff;
    padding: 10px;
    ul {
        margin: 10px 0;
        li {
            margin-left: 50px;
            line-height: 40px;
            font-size: 15px;
            p {
                display: inline-block;
                margin-right: 50px;
            }
            span {
                display: inline-block;
                margin-left: 20px;
                color: #2d7edf;
                font-weight: bold;
            }
        }
    }
}

/deep/.el-table thead .cell {
    text-align: center !important;
}
/deep/.el-table td,
.el-table th {
    text-align: center;
}
.money {
    background: #fff;
    padding: 10px;
    margin-bottom: 15px;
    .contentTotal {
        p {
            display: inline-block;
            font-size: 15px;
            margin-right: 20px;
            color: #dd6161;
            margin: 15px 0 15px 10px;
        }
    }
}
// /deep/.el-button {
//   padding: 8px 10px;
// }
/deep/.el-table thead {
    color: #2d7edf;
    .cell {
        text-align: left;
    }
}
.qrcodeImg {
    width: 100px;
    height: 100px;
}
.address {
    background: #fff;
    padding: 10px;
    margin: 15px 0;
    ul {
        margin: 10px 0;
        li {
            margin-left: 50px;
            line-height: 40px;
            font-size: 15px;
            p {
                display: inline-block;
                margin-right: 50px;
            }
        }
    }
}
.orderBox {
    background: #fff;
    padding: 10px;
}
.total {
    margin: 15px 0;
    background: #fff;
    padding: 20px 10px;
    text-align: right;
    p {
        display: inline-block;
        font-size: 15px;
        color: #2d7edf;
        margin-left: 30px;
        font-weight: bold;
    }
}
.fix {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
}
.headerNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > span {
        color: #2d7edf;
    }
    .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        p {
            margin-left: 10px;
            font-size: 15px;
            color: #333;
        }
    }
}
/deep/.el-dialog__body {
    padding: 10px 20px;
}
.qrcode {
    > .div {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 10px;
        span {
            display: inline-block;
            width: 100px;
            text-align: right;
        }
    }
}
.downloadClass {
    cursor: pointer;
    color: #4c81eb;
}
#contentQr {
    height: 150px;
    width: 150px;
    margin: 20px auto 10px;
}
.contentsucceed {
    text-align: center;
    .imgBox {
        margin: auto;
        width: 174px;
        height: 178px;
        img {
            width: 100%;
            height: auto;
        }
    }
    .content_title {
        .content_title_txt {
            margin-bottom: 15px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            .money {
                color: red;
            }
        }
    }
    .payBox {
        margin-top: 60px;
        width: 450px;
        height: 100px;
        .payBox_way {
            float: left;
            height: 50px;
            width: 450px;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 50px;
            background-color: #eee;
        }
        .payBox_mode {
            display: flex;
            justify-content: space-between;
            height: 50px;
            width: 450px;
            padding: 0 10px 0 10px;
            text-align: left;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 50px;
        }
    }
}
</style>
